<template>
  <div>
    <!-- 如果有文本样式内容 -->
    <template v-if="hasTextContent">
      <div v-if="!readonly" style="margin-bottom: 10px">
        <el-button icon="circle-plus" plain type="primary" @click="handleAdd(typeText)">添加文字</el-button>
        <el-button icon="circle-plus" plain type="success" @click="handleAdd(typeImage)">添加图片</el-button>
      </div>

      <!-- 内容信息 -->
      <el-table :data="dataList" fit highlight-current-row stripe style="width: 100%;">
        <el-table-column align="center" type="index" width="50">
        </el-table-column>

        <el-table-column align="left" label="内容" min-width="200" prop="content">
          <template #default="scope">
            <template v-if="scope.row.type === typeText">
              <el-input v-model="scope.row.content" :autosize="{ minRows: 2}" :maxlength="200" :readonly="readonly" placeholder="请填写内容" show-word-limit type="textarea"/>
            </template>
            <template v-else>
              <UploadImage v-model="scope.row.content" :disabled="readonly" :file-size="fileSize" :show-tip="false"/>
            </template>
          </template>
        </el-table-column>

        <el-table-column v-if="!readonly" align="center" class-name="small-padding fixed-width" fixed="right" label="操作" width="160px">
          <template #default="scope">
            <el-button :disabled="dataList.indexOf(scope.row) === 0" circle icon="upload" plain type="success" @click="handleMoveUp(dataList.indexOf(scope.row))"></el-button>
            <el-button :disabled="dataList.indexOf(scope.row) === dataList.length - 1" circle icon="download" plain type="info" @click="handleMoveDown(dataList.indexOf(scope.row))"></el-button>
            <el-button circle icon="delete" plain type="danger" @click="handleRemove(dataList.indexOf(scope.row))"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <!-- 只有图片时的样式 -->
    <template v-else>
      <UploadImageMultiple v-model="dataList" :disabled="readonly" :file-size="fileSize" :image-type="typeImage" :limit="limit" :show-delete="true" height="66px" width="66px"/>
    </template>

    <!-- 如果没有数据 或者 没有文本内容 -->
    <template v-if="(dataList.length === 0 || !hasTextContent) && !readonly && textContent">
      <div style="margin-top: 10px">
        <el-button v-if="textContent" icon="circle-plus" plain type="primary" @click="handleAdd(typeText)">添加文字</el-button>
      </div>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { computed, PropType, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { UploadImage, UploadImageMultiple } from '@/components/upload';
import { UploadItemData } from '@/components/upload/src/use-upload.ts';

const props = defineProps({
  itemList: {
    type: Array as PropType<UploadItemData[]>,
    default: () => []
  },
  readonly: {
    type: Boolean,
    default: false
  },
  textContent: {
    type: Boolean,
    default: false
  }
});

const limit = ref(30); // 最大数量
const fileSize = ref(10); // 文件大小
const typeImage = ref(1); // 图片
const typeText = ref(2);  // 文字

const dataList = computed(() => props.itemList);

const hasTextContent = computed(() => {
  return dataList.value.filter(item => item.type == typeText.value).length > 0
});

/** 新增内容 */
const handleAdd = (type: number) => {
  if (dataList.value.length >= limit.value) {
    return
  }
  // 类型只能为 1 和 2
  if (typeImage.value == type || typeText.value == type) {
    let newData: UploadItemData = {
      id: undefined,
      content: '', // 内容 (文本描述 图片URL)
      type: type,  // 类型 1:商品详情图片 2:文字描述
      orderNum: dataList.value.length + 1 // 排序字段
    }
    dataList.value.push(newData);
  }
};

/** 删除内容 */
const handleRemove = (index: number) => {
  dataList.value.splice(index, 1);
  if (!hasTextContent.value) {
    let toRemove = dataList.value.filter(item => {
      return !item.content || item.content.length === 0
    })
    toRemove.forEach(item => dataList.value.splice(dataList.value.indexOf(item), 1));
  }
};

/** 处理上移 */
const handleMoveUp = (index: number) => {
  if (index === 0) {
    ElMessage.error('已经到顶了')
    return
  }
  handleSwapItems(index, index - 1)
};

/** 处理下移 */
const handleMoveDown = (index: number) => {
  if (index === dataList.value.length - 1) {
    ElMessage.error('已经到底了')
    return
  }
  handleSwapItems(index, index + 1)
};

/** 处理上下移动逻辑 */
const handleSwapItems = (oldIndex: number, newIndex: number) => {
  dataList.value[oldIndex] = dataList.value.splice(newIndex, 1, dataList.value[oldIndex])[0]
};
</script>

<style lang="scss" scoped>

</style>
